<template>
  <div class="ItemType-container">
    <v-skeleton-loader
      v-if="loading"
      height="100%"
      type="list-item@20"
    ></v-skeleton-loader>
    <Table
      v-else
      :headers="headers"
      :items="itemCates"
      show-expand
      addTooltip="Add Item Cate"
      disable-sort
      hide-default-footer
      @add="openAddItemCate"
    >
      <template #item="{ item, isExpanded, expand }">
        <tr
          @click="expand(!isExpanded)"
          class="text-left pointer v-row-group__header"
        >
          <td>
            <v-btn v-if="item.children.length > 0" icon>
              <v-icon v-if="isExpanded"> mdi-chevron-down </v-icon>
              <v-icon v-else> mdi-chevron-up </v-icon>
            </v-btn>
          </td>
          <td class="category-name" :colspan="headers.length - 1">
            {{ item.description }}
          </td>
          <td class="table-header text-right" colspan="1">
            <div class="table-header-append">
              <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                  <v-icon
                    @click.stop="openAddItem(item)"
                    v-bind="attrs"
                    v-on="on"
                    small
                    class="mr-2 pointer"
                    color="#79839B"
                  >
                    mdi-plus
                  </v-icon>
                </template>
                <span>Add Item</span>
              </v-tooltip>
              <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                  <v-icon
                    @click.stop="openEditItemCate(item)"
                    v-bind="attrs"
                    v-on="on"
                    small
                    class="mr-2 pointer"
                    color="#79839B"
                  >
                    mdi-square-edit-outline
                  </v-icon>
                </template>
                <span>Edit Item Cate</span>
              </v-tooltip>
              <v-tooltip bottom>
                <template v-slot:activator="{ on, attrs }">
                  <v-icon
                    @click.stop="openDeleteItemCate(item)"
                    small
                    v-bind="attrs"
                    v-on="on"
                    color="#79839B"
                  >
                    mdi-delete
                  </v-icon>
                </template>
                <span>Delete Item Cate</span>
              </v-tooltip>
            </div>
          </td>
        </tr>
      </template>
      <template v-slot:expanded-item="{ headers, item }">
        <tr v-for="child in item.children" :key="child.id">
          <td
            v-for="header in headers"
            :key="header.value"
            class="text-left"
            :class="{ 'text-right': header.value === 'action' }"
            :colspan="1"
          >
            <template v-if="header.value === 'file'">
              <v-icon
                v-if="child.attachment && child.attachment.length > 0"
                small
                class="file-icon"
              >
                mdi-file
              </v-icon>
            </template>
            <template v-if="header.value === 'action'">
              <div class="action">
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      @click="openEditItem(child)"
                      v-bind="attrs"
                      v-on="on"
                      small
                      class="mr-2 pointer"
                      color="#79839B"
                    >
                      mdi-square-edit-outline
                    </v-icon>
                  </template>
                  <span>Edit Item</span>
                </v-tooltip>
                <v-tooltip bottom>
                  <template v-slot:activator="{ on, attrs }">
                    <v-icon
                      v-bind="attrs"
                      v-on="on"
                      @click="openDeleteItem(child)"
                      small
                      color="#79839B"
                    >
                      mdi-delete
                    </v-icon>
                  </template>
                  <span>Delete Item</span>
                </v-tooltip>
              </div>
            </template>
            <template v-else>
              {{ child[header.value] }}
            </template>
          </td>
        </tr>
      </template>
    </Table>
    <Dialog
      @submit="saveItemCate"
      v-model="showDialog"
      :width="dialogWidth"
      :show-save="![3, 6].includes(step)"
      :title="dialogTitle"
    >
      <template v-if="[1, 2].includes(step)" #headerAppend="{ close }">
        <v-icon class="icon pointer" color="#fff" @click="downloadFile">
          mdi-file-download
        </v-icon>
        <v-icon class="icon pointer" color="#fff" @click="deleteFile">
          mdi-delete
        </v-icon>
        <v-icon @click="saveItem" class="icon pointer" color="#EB9B31">
          mdi-content-save
        </v-icon>
        <v-icon @click="close" class="icon pointer" color="#fff">
          mdi-close
        </v-icon>
      </template>
      <AddEditItem v-if="[1, 2].includes(step)" ref="addEditItem"></AddEditItem>
      <AddEditItemCate
        v-else-if="[4, 5].includes(step)"
        ref="addEditItemCate"
      ></AddEditItemCate>
      <DeleteItem
        v-else-if="step === 3"
        @delete="deleteItem"
        :item="selectedItem"
        ref="deleteItem"
      ></DeleteItem>
      <DeleteItemCate
        v-else-if="step === 6"
        @delete="deleteItemCate"
        :item="selectedItemCate"
        ref="deleteItemCate"
      ></DeleteItemCate>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditItem from "@/components/Maintenance/Setting/ItemType/AddEditItem.vue";
import AddEditItemCate from "@/components/Maintenance/Setting/ItemType/AddEditItemCate.vue";
import DeleteItem from "@/components/Maintenance/Setting/ItemType/DeleteItem.vue";
import DeleteItemCate from "@/components/Maintenance/Setting/ItemType/DeleteItemCate.vue";
import { IFile } from "@/components/Project/index";
interface IItemCate {
  id: string;
  description: string;
  cateCode: string;
  children: IItem[];
}
interface IItem {
  id: string;
  cateCode: string;
  description: string;
  brand: string;
  manufacturer: string;
  itemNumber: string;
  itemDescription: string;
  unitCost: string;
  attachment?: IFile[];
}
@Component({
  components: {
    Table,
    Dialog,
    AddEditItem,
    AddEditItemCate,
    DeleteItem,
    DeleteItemCate,
  },
})
export default class ItemType extends Vue {
  // 1.addItem 2.EditItem  3.deleteItem 4.addItemCate 5.EditItemCate 6.deleteItemCate
  step = -1;
  // dialog
  showDialog = false;
  dialogTitle = "";
  get dialogWidth() {
    return [1, 2].includes(this.step) ? 584 : 480;
  }
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }

  deleteFile() {
    (this.$refs.addEditItem as AddEditItem).openDeleteAttachment();
  }

  downloadFile() {
    (this.$refs.addEditItem as AddEditItem).downloadFile();
  }

  // table
  loading = false;
  headers = [
    {
      text: "Description",
      value: "description",
      align: "start",
    },
    {
      text: "Cate Code",
      value: "cateCode",
      align: "start",
    },
    {
      text: "Item Number",
      value: "itemNumber",
      align: "start",
    },
    {
      text: "Item Description",
      value: "itemDescription",
      align: "start",
    },
    {
      text: "Unit Cost",
      value: "unitCost",
      align: "start",
    },
    {
      text: "",
      value: "file",
      align: "start",
    },
    {
      text: "",
      value: "action",
      align: "right",
    },
  ];
  itemCates: IItemCate[] = [];
  getItemCates() {
    this.loading = true;
    setTimeout(() => {
      this.itemCates = [
        {
          id: "1",
          description: "Elevator",
          cateCode: "ELEV",
          children: [
            {
              id: "1",
              cateCode: "ELEV",
              description: "Elevator",
              brand: "Toto",
              manufacturer: "China",
              itemNumber: "ELEV 230",
              itemDescription: "Elevator 230 steps",
              unitCost: "10,000.00",
              attachment: [
                {
                  id: "1",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202201",
                },
                {
                  id: "2",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202202",
                },
                {
                  id: "3",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&w=400",
                  title: "STD202203",
                },
              ],
            },
            {
              id: "2",
              cateCode: "ELEV",
              description: "Elevator",
              brand: "Toto",
              manufacturer: "China",
              itemNumber: "ELEV 230",
              itemDescription: "Elevator 230 steps",
              unitCost: "10,000.00",
              attachment: [
                {
                  id: "1",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202201",
                },
                {
                  id: "2",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202202",
                },
                {
                  id: "3",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&w=400",
                  title: "STD202203",
                },
              ],
            },
            {
              id: "3",
              cateCode: "ELEV",
              description: "Elevator",
              brand: "",
              manufacturer: "",
              itemNumber: "ELEV 260",
              itemDescription: "Elevator",
              unitCost: "12,000.00",
              attachment: [
                {
                  id: "1",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202201",
                },
                {
                  id: "2",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202202",
                },
                {
                  id: "3",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&w=400",
                  title: "STD202203",
                },
              ],
            },
          ],
        },
        {
          id: "2",
          description: "Lift",
          cateCode: "LIFT",
          children: [
            {
              id: "4",
              cateCode: "LIFT",
              description: "LIFT",
              brand: "",
              manufacturer: "",
              itemNumber: "",
              itemDescription: "",
              unitCost: "",
            },
            {
              id: "5",
              cateCode: "LIFT",
              description: "LIFT",
              brand: "",
              manufacturer: "",
              itemNumber: "LFT3CBM",
              itemDescription: "Lift 3 CBM",
              unitCost: "8,000.00",
              attachment: [
                {
                  id: "1",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202201",
                },
                {
                  id: "2",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202202",
                },
                {
                  id: "3",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&w=400",
                  title: "STD202203",
                },
              ],
            },
            {
              id: "6",
              cateCode: "LIFT",
              description: "LIFT",
              brand: "",
              manufacturer: "",
              itemNumber: "LFT3CBM",
              itemDescription: "Lift 5 CBM",
              unitCost: "28,000.00",
              attachment: [
                {
                  id: "1",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202201",
                },
                {
                  id: "2",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1600",
                  title: "STD202202",
                },
                {
                  id: "3",
                  type: "jpeg",
                  src: "https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&w=400",
                  title: "STD202203",
                },
              ],
            },
          ],
        },
        {
          id: "3",
          description: "Sanitaryware",
          cateCode: "SW",
          children: [
            {
              id: "7",
              cateCode: "SW",
              description: "Sanitaryware",
              brand: "",
              manufacturer: "",
              itemNumber: "SW11",
              itemDescription: "Toilet Bowl",
              unitCost: "100.00",
            },
          ],
        },
      ];
      this.loading = false;
    }, 800);
  }

  // action
  // Item
  selectedItem: IItem | null = null;
  openAddItem(item: IItemCate) {
    this.step = 1;
    this.selectedItemCate = item;
    this.dialogTitle = "Add Item";
    this.$nextTick(() => {
      const addEditItemRef = this.$refs.addEditItem as AddEditItem;
      addEditItemRef.resetForm();
    });
    this.openDialog();
  }

  openEditItem(item: IItem) {
    this.step = 2;
    this.dialogTitle = "Edit Item";
    this.selectedItem = item;
    this.$nextTick(() => {
      const addEditItemRef = this.$refs.addEditItem as AddEditItem;
      addEditItemRef.resetForm();
      setTimeout(() => {
        addEditItemRef.setFormData(item);
      });
    });
    this.openDialog();
  }

  openDeleteItem(item: IItem) {
    this.step = 3;
    this.dialogTitle = "Delete Item";
    this.selectedItem = item;
    this.openDialog();
  }

  addItem(item: IItem) {
    console.log(this.selectedItemCate, item);
    if (this.selectedItemCate) {
      this.selectedItemCate.children.push(item);
    }
  }

  editItem(item: IItem) {
    if (this.selectedItem) {
      Object.assign(this.selectedItem, item);
    }
  }

  deleteItem(item: IItem) {
    if (!item) return;
    const itemCate = this.itemCates.find((itemCate) => {
      return itemCate.children.includes(item as IItem);
    });
    if (itemCate) {
      const index = itemCate.children.indexOf(item);
      itemCate.children.splice(index, 1);
      this.closeDialog();
    }
  }

  async saveItem() {
    const result = (await (
      this.$refs.addEditItem as AddEditItem
    ).validateFormData()) as IItem;
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.addItem(result);
      } else if (this.step === 2) {
        this.editItem(result);
      }
      this.closeDialog();
    }
  }
  // Item Cate
  selectedItemCate: IItemCate | null = null;
  openAddItemCate() {
    this.step = 4;
    this.dialogTitle = "Add Item Cate";
    this.$nextTick(() => {
      const addEditItemCateRef = this.$refs.addEditItemCate as AddEditItemCate;
      addEditItemCateRef.resetForm();
    });
    this.openDialog();
  }

  openEditItemCate(item: IItemCate) {
    const { cateCode, description } = item;
    this.step = 5;
    this.dialogTitle = "Edit Item Cate";
    this.selectedItemCate = item;
    this.$nextTick(() => {
      const addEditItemCateRef = this.$refs.addEditItemCate as AddEditItemCate;
      addEditItemCateRef.resetForm();
      setTimeout(() => {
        addEditItemCateRef.setFormData({ cateCode, description });
      });
    });
    this.openDialog();
  }

  openDeleteItemCate(item: IItemCate) {
    this.step = 6;
    this.dialogTitle = "Delete Item Cate";
    this.selectedItemCate = item;
    this.openDialog();
  }

  addItemCate(itemCate: IItemCate) {
    this.itemCates.push(itemCate);
  }

  editItemCate(itemCate: IItemCate) {
    if (this.selectedItemCate) {
      Object.assign(this.selectedItemCate, itemCate);
    }
  }

  deleteItemCate(itemCate: IItemCate) {
    if (!itemCate) return;
    const index = this.itemCates.findIndex((item) => itemCate.id === item.id);
    this.itemCates.splice(index, 1);
    this.closeDialog();
  }

  async saveItemCate() {
    const result = (await (
      this.$refs.addEditItemCate as AddEditItemCate
    ).validateFormData()) as IItemCate;
    if (result) {
      if (this.step === 4) {
        result.id = String(new Date().getTime());
        this.$set(result, "children", []);
        this.addItemCate(result);
      } else if (this.step === 5) {
        this.editItemCate(result);
      }
      this.closeDialog();
    }
  }

  created() {
    this.getItemCates();
  }

  mounted() {
    this.$store.commit("MaintenanceStore/switchActionIcon", "mdi-file-export");
  }
}
</script>

<style lang="scss" scoped>
@import "./ItemType.scss";
</style>
